// const App = {
//     data: function () {
//         return {
//             a: 0,
//             b: 0,
//             sym: '+',
//             res: 0
//         }
//     },
//     computed: {
//         getRes() {
//             var a = Number(this.a),
//                 b = Number(this.b);
//             return eval("a" + this.sym + "b");
//         }
//     },
//     template: `
//     <div>
//         <div>
//             <span>{{ a }}</span>
//             <span>{{ sym }}</span>
//             <span>{{ b }}</span>
//             <span> = </span>
//             <span>{{ getRes }}</span>
//         </div>

//         <div>
//             <input type="number" v-model="a" />
//             <input type="number" v-model="b" />
//         </div>

//         <div>
//             <button @click="toggleTag('jia')"> + </button>
//             <button @click="toggleTag('jian')"> - </button>
//             <button @click="toggleTag('cheng')"> * </button>
//             <button @click="toggleTag('chu')"> / </button>
//         </div>
//     </div>
//     `,
//     methods: {
//         toggleTag(tag) {
//             switch (tag) {
//                 case 'jia':
//                     this.sym = '+';
//                     break;
//                 case 'jian':
//                     this.sym = '-';
//                     break;
//                 case 'cheng':
//                     this.sym = '*';
//                     break;
//                 case 'chu':
//                     this.sym = '/';
//                     break;
//             }
//         }
//     }
// }
// var vm = Vue.createApp(App).mount('#app');
// console.log(vm);


import Vue from './Vue';


var vm = new Vue({
    el: '#app',
    template: `
        <span>{{ a }}</span>
        <span> + </span>
        <span>{{ b }}</span>
        <span> = </span>
        <span>{{ total }}</span>
    `,
    computed: {
        total() {
            return this.a + this.b;
        }
    },
    data: function () {
        return {
            a: 1,
            b: 2
        }
    },
    computed: {
        total() {
            console.log('computed total');
            return this.a + this.b;
        }
    }
})
// console.log(vm);
console.log(vm.total);
console.log(vm.total);
console.log(vm.total);
console.log(vm.total);
console.log(vm.total);
vm.a = 100;
vm.b = 500;
console.log(vm.total);
console.log(vm.total);
console.log(vm.total);
console.log(vm.total);
console.log(vm.total);